<template>
  <div class="education-select">
    <!-- 选择章节 -->
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
      filterable
      style="width: 90%"
    ></el-cascader>
  </div>
</template>
<script>
import { sysCourseChapterQuery } from '@/api/admin/courseLibrary/sysCourseChapter.js'
export default {
  data() {
    return {
      value: [],
      options: [],
      props: {
        children: 'childList',
        label: 'name',
        value: 'id',
        expandTrigger: 'hover',
        checkStrictly: false,
        emitPath: false,
        multiple: false,
      },
      listQuery: {
        pid: 0,
        page: 1,
        limit: 9999,
        courseId: '', //课程ID
      },
    }
  },
  props: ['defaultValue', 'courseId'],
  watch: {
    defaultValue() {
      this.getTree()
    },
  },
  mounted() {
    this.getTree()
  },
  methods: {
    getTree() {
      this.listQuery.courseId = this.courseId || this.$store.getters.courseId
      sysCourseChapterQuery(this.listQuery).then((res) => {
        this.options = res.data.data
        this.options.forEach((v) => {
          v.childList.forEach((m) => {
            delete m.childList
          })
        })
        this.value = this.defaultValue
      })
    },
    handleChange(value) {
      this.$emit('emit', value)
    },
  },
}
</script>